<template>
	<f-popup ref="popup" position="bottom" z-index="99">
		<view class="cart-list">
			<view class="head">
				<view class="title">购物车清单</view>
				<view class="iconfont icon-a-close1" @click="close"></view>
			</view>
			
			<scroll-view scroll-y class="scroll">
				<view class="lists">
					<view class="list-item" v-for="item in cartList" :key="item.gid">
						<view class="">
							<view class="title">{{ item.product_title }}</view>
							<view class="flex ">
								<view class="relation" v-for="(relation, index) in item.relation" :key="index">{{ relation.product_title }}</view>
							</view>
						</view>
						<com-input-number :value="item.quantity" @input="changeItemNumber($event, item)"></com-input-number>
					</view>
				</view>
				<view v-if="cartList.length === 0" class="empty">暂无数据</view>
			</scroll-view>
		</view>
	</f-popup>
</template>

<script>
	export default {
		name: 'cart-list',
		data() {
			return {
				cartList: [],
				loading: false,
				timer: null,
				timer2: null, // 提交的定时
				preItem: {}, // 上一个修改的item
			};
		},
		methods: {
			changeItemNumber(value, item) {
				if (item.gid === this.preItem.gid) {
					clearTimeout(this.timer)
				}
				this.preItem = item
				this.$emit('changeLoading', true)
				this.timer = setTimeout(()=> {
					if (value) {
						this.handleUpdateCart(item.gid, value)
					} else {
						this.handleDeleteCart(item.gid)
					}
				}, 300)
			},
			// 更新购物车
			handleUpdateCart(gid, quantity) {
				this.$api.agentProductEditApi(gid, {quantity}).then(res=> {
					this.$emit('change')
				}).catch(err=> {
					console.log('err', err);
				}).finally(()=> {
					this.$emit('changeLoading', false)
				})
			},
			// 删除购物车
			handleDeleteCart(gid) {
				this.$api.agentProductDeleteApi(gid).then(res=> {
					this.$emit('change')
				}).catch(err=> {
					console.log('err', err);
				}).finally(()=> {
					this.$emit('changeLoading', false)
				})
			},
			getList(cartList) {
				this.cartList = cartList
			},
			open(cartList) {
				this.cartList = cartList
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart-list {
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 0 0;
		padding-bottom: calc(300rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(300rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
		
		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 56rpx;
			box-sizing: border-box;
			
			.title {
				font-size: 34rpx;
				font-weight: 600;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
			}
			
			.icon-a-close1 {
				color: #000000;
				font-size: 52rpx;
			}
		}
		
		.scroll {
			width: 100%;
			max-height: 50vh;
		}
		
		.lists {
			padding: 0 56rpx;
			
			.list-item {
				display: flex;
				padding: 28rpx 0;
				align-items: center;
				box-sizing: border-box;
				justify-content: space-between;
				border-bottom: 1px solid #F1F1F1;
				
				&:first-child {
					padding-top: 0;
				}
			}
			
			.title {
				font-size: 34rpx;
				font-weight: 400;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
			}
			
			.relation {
				border-radius: 6rpx;
				padding: 4rpx 16rpx;
				box-sizing: border-box;
				background-color: #FFF1E9;
				
				color: #E37318;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}
</style>
